import React, {useEffect, useState} from "react";
import {useSelector} from "react-redux";

import {Box, Grid} from "@mui/material";

import RecentLessonSchedule from "./welcome/recent-lesson-schedule";
import UnconfirmedCount from "./welcome/unconfirmed-count";
import LessonScheduleStatus from "./welcome/lesson-schedule-status";
import ShareLink from "./welcome/share-link";

import {generateCode} from "../utils/referrer";
import Commission from "./finance/commission";


function Welcome() {

    const user = useSelector(state => state.auth.user);
    const role = user?.role;

    const [principal, setPrincipal] = useState(false);
    const [code, setCode] = useState("");

    useEffect(() => {
        if (role === "PRINCIPAL") {
            setPrincipal(true);
            setCode(generateCode(user.id, user.schoolId));
        }
    }, [role, user.id, user.schoolId]);

    return (role === "REFERRER" ? <Commission principal={false}/> :
            <Box p={4} display="flex" gap={4} flexDirection="column">
                <Grid container spacing={2}>
                    {role === "PRINCIPAL" && (
                        <>
                            <Grid item sm={12} md={6}><RecentLessonSchedule/></Grid>
                            <Grid item sm={12} md={6}><LessonScheduleStatus/></Grid>
                            <Grid item sm={12} md={6}>
                                <ShareLink principal={principal} schoolId={user.schoolId} userId={user.id} code={code}/>
                            </Grid>
                            <Grid item sm={12} md={6}><UnconfirmedCount/></Grid>
                        </>
                    )}

                    {role === "TEACHER" && (
                        <>
                            <Grid item sm={12} md={6}><RecentLessonSchedule/></Grid>
                            <Grid item sm={12} md={6}><UnconfirmedCount/></Grid>
                        </>
                    )}

                    {role === "PARENT" && (
                        <>
                            <Grid item sm={12} md={6}><RecentLessonSchedule/></Grid>
                            <Grid item sm={12} md={6}>
                                <ShareLink principal={principal} schoolId={user.schoolId} userId={user.id} code={code}/>
                            </Grid>
                        </>
                    )}

                    {role === "STUDENT" && (<Grid item sm={12} md={6}><RecentLessonSchedule/></Grid>)}

                </Grid>
                {role === "REFERRER" && (<Grid item sm={12} md={12}><Commission/></Grid>)}
            </Box>
    );
}

export default Welcome;
